import _ from 'lodash';
<!--
 * @Description: 
 * @Date: 2024-01-17 08:53:28
 * @LastEditTime: 2024-02-18 11:15:06
-->
<template>
  <el-dialog
    title="复函"
    :visible.sync="dialogVisible"
    class="qc-config-dialog"
    width="600px"
    :append-to-body="true"
  >
    <el-steps :active="activeName" align-center style="margin-bottom: 20px">
      <el-step
        v-for="(item, index) in ruleList"
        :title="item.name"
        :key="item.name"
        @click.native="handleClick(index)"
      ></el-step>
    </el-steps>
    <!-- <el-tabs v-model="activeTab" :lazy="true" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in ruleList"
        :label="item.name"
        :name="numToStr(item.orderId)"
        :key="item.name"
      >
      </el-tab-pane>
    </el-tabs> -->
    <div v-if="activeTab == 0">
      <el-form
        :model="replyOneForm"
        :rules="rulesOne"
        ref="replyOneForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="包抓领导" prop="sleader">
          <el-input
            v-model="replyOneForm.sleader"
            placeholder="请输入包抓领导"
            :disabled="oneStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="责任科室" prop="sdepartment">
          <el-input
            v-model="replyOneForm.sdepartment"
            placeholder="请输入责任科室"
            :disabled="oneStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="责任人员" prop="suser">
          <el-input
            v-model="replyOneForm.suser"
            placeholder="请输入责任人员"
            :disabled="oneStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="sphone">
          <el-input
            v-model="replyOneForm.sphone"
            placeholder="请输入联系电话"
            :disabled="oneStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传附件" prop="sannex">
          <FileUpload
            v-model="replyOneForm.sannex"
            type="jylzActivity"
            :uploadUrl="uploadUrl"
            :limit="1"
            :disabled="oneStatus"
            @getActivityUrl="getOneUrl"
          ></FileUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="oneStatus" @click="submitForm">
          提交反馈</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </div>
    <div v-if="activeTab == 1">
      <el-form
        :model="replyTwoForm"
        :rules="rulesTwo"
        ref="replyTwoForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="联系时间" prop="rtime">
          <el-date-picker
            v-model="replyTwoForm.rtime"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :disabled="twoStatus"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系地点" prop="raddr">
          <el-input
            v-model="replyTwoForm.raddr"
            placeholder="请输入联系地点"
            :disabled="twoStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="参加人员" prop="rusers">
          <el-input
            v-model="replyTwoForm.rusers"
            placeholder="请输入参加人员"
            :disabled="twoStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="沟通效果" prop="rresult">
          <el-input
            v-model="replyTwoForm.rresult"
            placeholder="请输入沟通效果"
            type="textarea"
            :rows="2"
            :disabled="twoStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传附件" prop="rannex">
          <FileUpload
            v-model="replyTwoForm.rannex"
            type="jylzActivity"
            :limit="1"
            :disabled="twoStatus"
            @getActivityUrl="getTwoUrl"
          ></FileUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="twoStatus" @click="submitForm">
          提交反馈</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </div>
    <div v-if="activeTab == 2">
      <el-form
        :model="replyThreeForm"
        :rules="rulesThree"
        ref="replyThreeForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="etitle">
          <el-input
            v-model="replyThreeForm.etitle"
            placeholder="请输入标题"
            :disabled="threeStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="etype">
          <el-input
            v-model="replyThreeForm.etype"
            placeholder="请输入类别"
            :disabled="threeStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="签发人" prop="eissuer">
          <el-input
            v-model="replyThreeForm.eissuer"
            placeholder="请输入签发人"
            :disabled="threeStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="文号" prop="edocNumber">
          <el-input
            v-model="replyThreeForm.edocNumber"
            placeholder="请输入文号"
            :disabled="threeStatus"
          ></el-input>
        </el-form-item>
        <el-form-item label="反馈内容" prop="xxx">
          (网上提交后，请将纸质文件扫描成图片格式作为附件上传，并将纸质文件分别送人大人代选工委、督查室一份)
        </el-form-item>
        <el-form-item label="上传附件" prop="econtent">
          <FileUpload
            v-model="replyThreeForm.econtent"
            type="jylzActivity"
            :uploadUrl="uploadUrl"
            :limit="1"
            :disabled="threeStatus"
            @getActivityUrl="getThreeUrl"
          ></FileUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="threeStatus" @click="submitForm">
          完成复函</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  processInfoProId,
  updateProcessInfo,
  userListByRoleId,
} from "@/api/suggest/index";
export default {
  name: "replyDialog",
  props: ["value", "type", "proId", "ruleList"],
  data() {
    var valiNumber = (rule, value, callback) => {
      //包含小数的数字
      let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value === "") {
        callback(new Error("请输入内容"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      activeName: 1,
      activeTab: "0",
      replyOneForm: {
        sleader: "",
        sdepartment: "",
        suser: "",
        sphone: "",
        sannex: "",
      },
      replyTwoForm: {
        rtime: "",
        raddr: "",
        rusers: "",
        rresult: "",
        rannex: "",
      },
      replyThreeForm: {
        etitle: "",
        etype: "",
        eissuer: "",
        edocNumber: "",
        econtent: "",
      },
      rulesOne: {
        sleader: [
          { required: true, message: "请输入包抓领导", trigger: "blur" },
        ],
        sdepartment: [
          { required: true, message: "请输入责任科室", trigger: "blur" },
        ],
        suser: [{ required: true, message: "请输入责任人员", trigger: "blur" }],
        sphone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { required: true, validator: valiNumber, trigger: "blur" },
        ],
        sannex: [
          { required: true, message: "请输入上传附件", trigger: "blur" },
        ],
      },
      rulesTwo: {
        rtime: [{ required: true, message: "请输入联系时间", trigger: "blur" }],
        raddr: [{ required: true, message: "请输入联系地点", trigger: "blur" }],
        rusers: [
          { required: true, message: "请输入参加人员", trigger: "blur" },
        ],
        rresult: [
          { required: true, message: "请输入沟通效果", trigger: "blur" },
        ],
        rannex: [
          { required: true, message: "请输入上传附件", trigger: "blur" },
        ],
      },
      rulesThree: {
        etitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
        etype: [{ required: true, message: "请输入类别", trigger: "blur" }],
        eissuer: [{ required: true, message: "请输入签发人", trigger: "blur" }],
        edocNumber: [
          { required: true, message: "请输入文号", trigger: "blur" },
        ],
        econtent: [
          { required: true, message: "请输入反馈内容", trigger: "blur" },
        ],
      },
      uploadUrl:
        process.env.VUE_APP_BASE_API + "/system/user/profile/avatar/local",
      oneStatus: false,
      twoStatus: false,
      threeStatus: false,
      unStatus: null,
    };
  },
  created() {
    processInfoProId(this.proId).then((res) => {
      Object.keys(this.replyOneForm).forEach((key) => {
        this.replyOneForm[key] = res.data[key];
      });

      Object.keys(this.replyTwoForm).forEach((key) => {
        this.replyTwoForm[key] = res.data[key];
      });
      Object.keys(this.replyThreeForm).forEach((key) => {
        this.replyThreeForm[key] = res.data[key];
      });
      this.activeName = Number(res.data.unStatus);
      this.activeTab = (res.data.unStatus - 1).toString();

      if (res.data.unStatus == 1) {
        this.oneStatus = false;
        this.twoStatus = true;
        this.threeStatus = true;
      } else if (res.data.unStatus == 2) {
        this.oneStatus = true;
        this.twoStatus = false;
        this.threeStatus = true;
      } else if (res.data.unStatus == 3) {
        this.oneStatus = true;
        this.twoStatus = true;
        this.threeStatus = false;
      } else {
        this.oneStatus = true;
        this.twoStatus = true;
        this.threeStatus = true;
      }
    });
  },
  methods: {
    submitForm() {
      this.$nextTick(() => {
        if (this.activeTab == 0) {
          this.$refs["replyOneForm"].validate((valid) => {
            if (valid) {
              updateProcessInfo({
                proId: this.proId,
                ...this.replyOneForm,
                unStatus: 2,
              }).then((res) => {
                this.$message.success("任务分解反馈成功");
                this.dialogVisible = false;
              });
            } else {
              return false;
            }
          });
        } else if (this.activeTab == 1) {
          this.$refs["replyTwoForm"].validate((valid) => {
            if (valid) {
              updateProcessInfo({
                proId: this.proId,
                ...this.replyTwoForm,
                unStatus: 3,
              }).then((res) => {
                this.$message.success("与代表委员会沟通反馈成功");
                this.dialogVisible = false;
              });
            } else {
              return false;
            }
          });
        } else {
          this.$refs["replyThreeForm"].validate((valid) => {
            if (valid) {
              updateProcessInfo({
                proId: this.proId,
                ...this.replyThreeForm,
                unStatus: 4,
                status: 5,
              }).then((res) => {
                this.$message.success("复函成功");
                this.dialogVisible = false;
                this.$parent.getList();
              });
            } else {
              return false;
            }
          });
        }
      });
    },
    handleClick(index) {
      this.activeTab = index;
      this.$nextTick(() => {
        if (this.activeTab == 0) {
          this.$refs["replyOneForm"] &&
            this.$refs["replyOneForm"].clearValidate();
        } else if (this.activeTab == 1) {
          this.$refs["replyTwoForm"] &&
            this.$refs["replyTwoForm"].clearValidate();
        } else if (this.activeTab == 2) {
          this.$refs["replyThreeForm"] &&
            this.$refs["replyThreeForm"].clearValidate();
        }
      });
    },
    getOneUrl(value) {
      Boolean(value)
        ? (this.replyOneForm.sannex = value)
        : (this.replyOneForm.sannex = "");
    },
    getTwoUrl(value) {
      Boolean(value)
        ? (this.replyTwoForm.rannex = value)
        : (this.replyTwoForm.rannex = "");
    },
    getThreeUrl(value) {
      Boolean(value)
        ? (this.replyThreeForm.econtent = value)
        : (this.replyThreeForm.econtent = "");
    },
    getFileName(name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name && name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    numToStr(num) {
      num = num.toString();
      return num;
    },
  },
  watch: {
    value: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
    },
    dialogVisible(val) {
      this.$emit("input", val); //关键input
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-step__head.is-process,
.el-step__head {
  .el-step__icon.is-text {
    //这里设置的是下一步和等待状态里的文字颜色
    color: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }
}
::v-deep .el-step__title.is-process,
.el-step__title.is-wait {
  color: #c0c4cc !important;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: #000;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000;
}
</style>
